<template>
  <div class="ve-tree" style="height:calc(100vh - 20px)">
    <vue-easy-tree
        ref="veTree"
        node-key="id"
        height="calc(100vh - 20px)"
        :data="treeData"
        :props="props"
        :show-checkbox="true"
        @check="check"
        :check-node-checked="checkNodeChecked"
    >
    </vue-easy-tree>
  </div>
</template>

<script>
import Right from "@/right";

export default {
  components: {Right},
  data() {
    return {
      props: {
        label: "name",
        children: "children"
      },
      treeData: [],
      checkedKeys: []
    };
  },
  created() {
    const data = [],
        root = 8,
        children = 3,
        base = 1000;
    for (let i = 0; i < root; i++) {
      data.push({
        id: `${i}`,
        name: `test-${i}`,
        children: []
      });
      for (let j = 0; j < children; j++) {
        data[i].children.push({
          id: `${i}-${j}`,
          name: `test-${i}-${j}`,
          children: []
        });
        for (let k = 0; k < base; k++) {
          data[i].children[j].children.push({
            id: `${i}-${j}-${k}`,
            name: `test-${i}-${j}-${k}`
          });
        }
      }
    }
    data.push({
      id: `9`,
      name: `test-9`,
      children: []
    })

    this.treeData = [
      {
        id: `all`,
        name: `text-all`,
        children: data
      }
    ];
  },
  methods: {
    check(node, {checkedKeys}) {
      this.checkedKeys = checkedKeys
    },
    checkNodeChecked(node) {
      if (this.checkedKeys.length + 1 > 100) {
        console.log('超出')
        return false
      } else {
        return true
      }
    }
  }
};
</script>

<style>
</style>
